<template>
	<view class="reservation_box">
		<view class="card w statis pos_rel dpflxc">
			<view class="dpflxrjb " style="border-bottom: 1rpx #eee solid;">
				<view class="dpflxcjc staItem">
					<text>当前预约</text>
					<text class="num">{{currentSubscribe}}</text>
				</view>
				<view class="dpflxcjc staItem">
					<text>预约上限</text>
					<text class="num">{{upperSubscribe}}</text>
				</view>
			</view>
			<view class="changeAmout dpflxrjb">
				<view class="minus btn pos_rel" @click="setSubscribeNum('-1')"></view>
				<input type="number" :value="num" disabled="true" placeholder="200" @input="onKeyInput"/>
				<view class="plus btn pos_rel" @click="setSubscribeNum('1')"></view>
			</view>
			<text class="note">请根据线下情况同步增减预约人数</text>
		</view>
	</view>
</template>

<script>
	import request from "@/api/index.js";
	import configs from "@/config/common.js";
	export default {
		data() {
			return {
				currentSubscribe:'0',
				upperSubscribe:'0',
				num:1,
				maxNum:0,
				id:''
			
			}
		},
		onLoad(){
			// uni.clearStorage();
			this.getInfo();
			
		},
		methods: {
			setNum(e){
				if(e==0){
					this.num = ++this.num;
				}else{
					this.num = --this.num;
					if(this.num<0){
						this.num = 0;
					}
				}
				
			},
			onKeyInput: function(event) {
			    this.num = event.target.value
			},
			getInfo(){
				request.http('/shop/store-api/' + uni.getStorageSync('shop_id') + 
				'/reserve-config', 'GET').then(res => {
					console.log(res);
					if(res.data.code==0){
						this.id = res.data.data.id
						this.currentSubscribe = res.data.data.num;
						this.upperSubscribe = res.data.data.limitNum;
						this.num = res.data.data.num;
					}
				})
			},
			setSubscribeNum(e){
				uni.showLoading({
					title:'正在加载...'
				})
				uni.request({
					url: configs.myBaseUrl+'/shop/store-api/'+uni.getStorageSync('shop_id')+'/reserve-config',
					method:'PUT',
					header: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync('authorization')
					},
					data:{
						num: e,
						id:this.id
					},
					success: (res) => {
						console.log(res);
						if(res.data.code==0){
							this.currentSubscribe = res.data.data.num;
							this.num = res.data.data.num;
						}else{
							uni.showToast({
								title:res.data.msg,
							    icon: 'none'
							})
						}
					},
					complete() {
						setTimeout(function () {
						    uni.hideLoading();
						}, 500);
					}
					
				})
			}
			
		}
	}
	
	
</script>
<style src="../../static/css/app.css"></style>
<style>
	.card{
		border-radius: 20rpx;
	}
	.statis{
		box-sizing: border-box;
		padding: 0 30rpx 80rpx 30rpx;
		border-bottom: 1rpx #eee solid;
		
	}
	.statis::after{
		content: '';
		width: 1rpx;
		height: 40rpx;
		background: #DDDDDD;
		position: absolute;
		left: 50%;
		top: 54rpx;
	}
	
	.statis .staItem{
		width: 50%;
		height: 148rpx;
		font-weight: bold;
	}
	.statis .staItem .num{
		font-size: 32rpx;
		font-weight: bold;
		color: #F9600D;
		line-height: 32rpx;
		margin-top: 20rpx;
	}
	.changeAmout{
		width: 500rpx;
		height: 68rpx;
		background: #F5F5F5;
		margin-top: 80rpx;
		box-sizing: border-box;
		padding: 10rpx;
	}
	.changeAmout .btn{
		width: 48rpx;
		height: 48rpx;
	}
	.changeAmout input{
		width: calc(100% - 136rpx);
		text-align: center;
	}
	.note{
		font-size: 20rpx;
		font-weight: 500;
		color: #999999;
		margin-top: 30rpx;
	}
	.changeAmout .btn.minus{
		background-color: #fff;
	}
	.changeAmout .btn.minus::before{
		content: '';
		width: 24rpx;
		height: 2rpx;
		position: absolute;
		left: 12rpx;
		top: 23rpx;
		background-color: #aaa;
	}
	.changeAmout .btn.plus{
		background-color: #F9600D;
	}
	.changeAmout .btn.plus::before{
		content: '';
		width: 24rpx;
		height: 2rpx;
		position: absolute;
		left: 12rpx;
		top: 23rpx;
		background-color: #fff;
	}
	.changeAmout .btn.plus::after{
		content: '';
		width: 2rpx;
		height: 24rpx;
		position: absolute;
		top: 12rpx;
		left: 23rpx;
		background-color: #fff;
	}
</style>
